<template>
  <div>
    <div id="app" v-show="true">
      <div id="loader-wrapper">
        <!--        <div class="phonelogin">-->
        <!--          <div style="width: 100%;">-->
        <!--            <img :src="('static/mobile/img/common/48/logo3.png')" alt="My Animation" style="    position: absolute;-->
        <!--      top:18%;-->
        <!--      left: 10%;-->
        <!--      font-family: 'Open Sans';-->
        <!--      color: #FFF;-->
        <!--      font-size: 19px;-->
        <!--      width: 80%;-->
        <!--      text-align: center;-->
        <!--      z-index: 9999999999999;-->
        <!--      position: absolute;-->
        <!--      opacity: 1;-->
        <!--      line-height: 30px;-->
        <!--">-->
        <!--          </div>-->
        <!--          <img :src="('static/mobile/img/common/48/loding.gif')"   alt="My Animation" style="    position: absolute;-->
        <!--      top: 30%;-->
        <!--      left: 10%;-->
        <!--      color: #FFF;-->
        <!--      font-size: 19px;-->
        <!--      width: 80%;-->
        <!--      text-align: center;-->
        <!--      z-index: 9999999999999;-->
        <!--      opacity: 1;-->
        <!--      line-height: 30px;">-->
        <!--          <div class="load_title">正在加载 请耐心等待... </div>-->
        <!--        </div>-->
        <div class="phonelogin">
          <div style="width: 100%;">
            <img
:src="('static/mobile/img/common/48/logo3.png')"
alt="My Animation"
style="    position: absolute;
      top:18%;
      left: 10%;
      font-family: 'Open Sans';
      color: #FFF;
      font-size: 19px;
      width: 80%;
      text-align: center;
      z-index: 9999999999999;
      position: absolute;
      opacity: 1;
      line-height: 30px;
">
          </div>
          <img
:src="('static/mobile/img/common/48/loding.gif')"
alt="My Animation"
style="    position: absolute;
      top: 30%;
      left: 10%;
      color: #FFF;
      font-size: 19px;
      width: 80%;
      text-align: center;
      z-index: 9999999999999;
      opacity: 1;
      line-height: 30px;">
          <div class="load_title">正在加载 请耐心等待... </div>
        </div>
        <!--        <div id="loader"></div>-->
        <!--        <div class="loader-section section-left"></div>-->
        <!--        <div class="loader-section section-right"></div>-->

      </div>
    </div>
  </div>
</template>

<script>
import "vant/lib/field/style/less";
import {Notify, Toast} from "vant";
import { mapActions } from "vuex";
import router from "@/router.js";
import { getDynamicRoute } from "@/util/constants.js";

export default {
  name: "login-page",
  data() {
    return {
      loading: false,
    };
  },
  computed: {
  },
  mounted(){
    if(this.$route.query.code!=null&&this.$route.query.code!=''){
      setTimeout(()=>{
        this.onLogin(this.$route.query)
      },2000)
    }
  },
  methods: {
    ...mapActions(["oaPhoneLogin"]),
    onLogin() {
      let loginParams = {
        code:this.$route.query.code
      };
      this.loading = true;
      this.oaPhoneLogin(loginParams)
          .then((res) => {
            this.loading = false;
            if(res.success){
              router.$addRoutes(getDynamicRoute())
              Notify({ type: 'success', message: '登录成功!' });
              this.$router.push({ path: "/" });
              // this.$router.replace('/')
              console.log("store",this.$store.getters)
            }else{
              Toast.fail(res.result.message);
            }
          })
          .catch((err) => {
            console.log(err);
            this.loading = false;

            let msg =
                ((err.response || {}).data || {}).message ||
                err.message ||
                "请求出现错误，请稍后再试";
            Toast.fail(msg);
          });
    },
  },
};
</script>

<style scoped>
.loginbg{
  /*background-image: url("public/static/mobile/img/common/48/loginbg.png");*/
  background-repeat: round;
}
.bg {
  background-image: url("../assets/bg.jpg");
  background-repeat: round;
  /*width: 100%;*/
  /*height: 1080px;*/
}
.send-btn {
  height: 26px;
  line-height: 24px;
}

.button-con {
  /* margin-left: -21px; */
}

.top-area {
  margin: 30px 0;
}

.login-con {
  background-size: 100% 100%;
  /*height: calc(100vh - 46px);*/
  height: calc(100vh);
}

.login-btn {
  width: 40%;
  margin: 12px auto;
  border-radius: 50px;
  color: white;
}

.top-logo {
  width: 100px;
  margin: 16px 0;
}

.nobg input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
}


</style>

